<template>
  <div class="shopp">
    <div class="shopcar-container" v-for="item in list" :key="item.id">
      <van-swipe-cell>
        <div class="shopcart-box">
          <!-- 按钮 -->
          <van-checkbox
            @click="checkedCell"
            v-model="item.checked"
            checked-color="#F63515"
          ></van-checkbox>
          <img :src="item.imageHost + item.mainImage" />
          <div class="shopcart-item-info">
            <p class="shopcart-name">
              {{ item.name }}
            </p>
            <p class="shopcart-subtitle">仅售{{ item.price }}!!</p>
            <div class="shopcart-stepper">
              <span class="shopcart-price">￥{{ item.price }}</span>
              <van-stepper
                v-model="item.count"
                :name="item.productId"
                min="1"
                integer
                @plus="add(item.productId)"
                @minus="reduce(item.productId)"
              />
            </div>
          </div>
        </div>
        <template slot="right">
          <van-button square type="danger" text="删除" @click="del(item.id)" />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 提交订单部分 -->
    <div class="van-submit-bar">
      <van-submit-bar
        :price="$store.getters.getCountPrice * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox
          @click="handAllChecked"
          v-model="$store.getters.allChecked"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { cartList, cartDel, cartAdd } from "../../../api";
import { mapState } from "vuex";
export default {
  // computed: {
  ...mapState(["cartListS", "allChecked"]),
  // },
  data() {
    return {
      checked: false,
      checkeds: false,
      value: 1,
      list: [],
    };
  },
  methods: {
    // 删除商品方法
    del(id) {
      let params = {
        id: id,
      };
      cartDel(params).then((res) => {
        // console.log(res);
        if (res.status == 0) {
          cartList((res) => {
            this.list = res.data;
          });
        }
      });
    },
    // 提交订单预留方法
    onSubmit() {
      console.log("提交订单预留方法");
    },
    // 添加商品调用方法
    add(productId) {
      let parent = {
        productId: productId,
        count: "+1",
      };
      cartAdd(parent).then((res) => {
        console.log(res);
        cartList((res) => {
          this.list = res.data;
        });
      });
    },
    // 减少商品方法调用方法
    reduce(productId) {
      let parent = {
        productId: productId,
        count: -1,
      };
      cartAdd(parent).then((res) => {
        console.log(res);
        cartList((res) => {
          this.list = res.data;
        });
      });
    },
    // 全选
    handAllChecked() {
      this.list = this.$store.state.cartListS;
      // 触发在store中的 actions 的  changeAllChecked 方法
      this.$store.dispatch("changeAllChecked");
    },
    cartData() {
      this.$store.dispatch("getCartData");
    },
    checkedCell() {
      this.$store.dispatch("changeChecked");
    },
  },

  created() {
    this.cartData();
    // 获取 购物车商品列表
    cartList((res) => {
      /* 此处如果直接:this.list=this.$store.state.cartListS;
           会不时出现进入主页，进入购物车，会出现已加入购物车商品，未渲染界面的情况  */
      this.list = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.shopcar-container {
  margin-top: 100px;
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    height: 200px;

    img {
      width: 180px;
      height: 180px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex: 70%;
      flex-direction: column;
      justify-content: space-between;

      .shopcart-name {
        height: 70px;
        font-size: 26px;
        overflow: hidden;
      }
      .shopcart-subtitle {
        font-size: 24px;
        color: #999;
      }
      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .shopcart-price {
          font-size: 30px;
          color: red;
        }
      }
    }
  }

  .van-button {
    height: 200px;
  }
}
.van-submit-bar {
  margin-bottom: 80px;
}
</style>